<div class="judul"><?php echo anchor("/grafik_perkembangan_pendidikan/", $title);?></div>
<script type="text/javascript">
    $(document).ready(function(){
        $('#tingkat_pendidikan').change(function(){
            $('#displayGrafik').html('');
            var value = $('#tingkat_pendidikan').val();
            if(value != ''){
                $.ajax({
                   url: "<?php echo site_url('ajax_target/getAdikAsuhByTingkatPendidikan');?>"+"/"+value,
                   cache: false,
                   type: 'POST',
                   dataType: 'json',
                   success: function(msg){
                       if(msg.length > 0){
                           var str = "<div class='data-list'><table class='tabel' width='60%'>";
                           str += "<tr><th><input type='checkbox' onclick='checkAdikAsuh()' /><input type='hidden' value='1' class='check'></th><th>Nama</th><th>Tgl. Lahir</th><th>Sekolah</th><th>Kelas</th><th>Tahun Ajaran</th></tr>";
                           for(var i=0;i<msg.length;i++){
                              var klas = (i%2)?'even':'odd';
                              str += "<tr class='"+klas+"'><td align='center'><input type='checkbox' name='idAdikAsuh[]' class='checks' value='"+msg[i].id+"'/></td><td>"+msg[i].nama+"</td><td>"+date4mysql(msg[i].tgl_lahir)+"</td><td>"+msg[i].sekolah+"</td><td>"+msg[i].kelas+' '+msg[i].tingkat_pendidikan+"</td><td>"+msg[i].tahun_ajaran+' '+msg[i].semester+"</td></tr>";
                           }
                           str += "</table><input type='button' value='Display' id='detail' onclick='displayGrafik()'></div>";
                       }else{
                           str = "<div class='error'>Tidak ada data adik asuh untuk tingkat pendidikan tersebut</div>";
                       }
                       
                       $('#tabelAdikAsuh').html(str);
                   }
                });
            }else{
               $('#tabelAdikAsuh').html("<fieldset><span class='tips'>Silahkan menggunakan opsi pencarian di atas</span></fieldset>");
            }
        })
    })
</script>
<form id='pilihAdikAsuh'>
<div class="data-input">
    <fieldset>
        <legend>Form Grafik Perkembangan Pendidikan</legend>
        <label>Tingkat Pendidikan</label>
        <select name="tingkat_pendidikan" id="tingkat_pendidikan">
            <option value="">Pilih tingkat pendidikan adik asuh</option>
            <?php
              foreach ($listTingkatPendidikan as $row){
            ?>
            <option value="<?php echo $row['id'];?>"><?php echo $row['nama'];?></option>
            <?php
              }
            ?>
        </select>
    </fieldset>
</div>
<div id="tabelAdikAsuh">
    <fieldset>
        <span class='tips'>Silahkan menggunakan opsi pencarian di atas</span>
    </fieldset>
</div>    
</form>
<div id="displayGrafik">
    
</div>
<script type="text/javascript">
    function checkAdikAsuh(){
      if($('.check').val() == 1){
          $('.checks').attr('checked', 'checked');
          $('.check').val('0');
      }else{
          $('.checks').removeAttr('checked');
          $('.check').val('1');
      }
   }
   function displayGrafik(){
       $.ajax({
           url: "<?php echo site_url('ajax_target/getGrafik');?>",
           cache: false,
           data: $('#pilihAdikAsuh').serialize(),
           type: 'POST',
           dataType: 'json',
           success: function(msg){
               if(msg['adikAsuh'] != 0){
                   var string ="<center><img src='<?php echo base_url()?>"+msg['graph']+"' /></center>";
                   string += "<div class='data-list'><table class='tabel' width='100%'>";
                   string += "<tr><th rowspan='2' style='vertical-align:middle'>Adik Asuh</th><th colspan='"+msg['kelas'].length+"'>Nilai Rata-Rata Per Kelas</th></tr>";
                   string += "</tr>";
                   for(var i=0;i<msg['kelas'].length;i++){
                       string += "<th>"+msg['kelas'][i].nama+' '+msg['kelas'][i].tingkat_pendidikan+"</th>";
                   }
                   string += "</tr>";
                   for(var j=0;j<msg['adikAsuh'].length;j++){
                       var klass = (j%2)?'even':'odd';
                       string += "<tr class='"+klass+"'><td>"+msg['adikAsuh'][j][0].nama+"</td>";
                       for(var k=0;k<msg['kelas'].length;k++){
                           if(msg['rata2'][j][k][0].pembilang == null){
                               var nilai = '-';
                           }else{
                               nilai = msg['rata2'][j][k][0].pembilang/msg['rata2'][j][k][0].penyebut;
                               nilai = Math.round(nilai*100)/100;
                           }
                           string += "<td>"+nilai+"</td>";
                       }
                       string += "</tr>";
                   }
                   string += "</table></div>";
               }else{
                 string = "<div class='error'>Pilih adik asuh terlebih dahulu</div>";
               }
               
               $('#displayGrafik').html(string);
           }
      })             
   }
</script>
